<template>
  <el-select v-model="benefitIds" placeholder="请选择会员权益" clearable multiple class="!w-240px">
    <el-option
      v-for="benefit in benefits"
      :key="benefit.id"
      :label="benefit.name"
      :value="benefit.id"
    />
  </el-select>
  <el-button
    v-if="showAdd"
    type="primary"
    class="ml-2"
    link
    @click="openForm('create')"
    v-hasPermi="['member:benefit:create']"
  >
    新增权益
  </el-button>

  <!-- 表单弹窗：添加 -->
  <BenefitForm ref="formRef" @success="getList" />
</template>

<script lang="ts" setup>
import { BenefitApi, BenefitVO } from '@/api/member/benefit'
import BenefitForm from '@/views/member/benefit/BenefitForm.vue'

defineOptions({ name: 'MemberBenefitSelect' })

const props = defineProps({
  /** 下拉框选中值 **/
  modelValue: {
    type: Array,
    default: undefined
  },
  /** 是否显示"新增权益"按钮 **/
  showAdd: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
defineExpose({
  showAdd: props.showAdd
})

const benefitIds = computed({
  get() {
    return props.modelValue
  },
  set(value: any) {
    emit('update:modelValue', value)
  }
})

const benefits = ref<BenefitVO[]>([])

const getList = async () => {
  benefits.value = await BenefitApi.getSimpleBenefitList()
}

/** 添加会员权益表单弹框 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 初始化 */
onMounted(() => {
  getList()
})
</script>
